blog

Home / DeveloperSection / Blogs / ASP.NET MVC 4 Bootstrap 3.3.2 in 2 Steps

ASP.NET MVC 4 Bootstrap 3.3.2 in 2 Steps

Anonymous User5383 03-Mar-2015

Hi everyone in this blog I’m explaining about getting start bootstrap step by step with MVC 4.

Description:

In this article, I am writing the step by step instruction on creating your first Twitter Bootstrap with ASP.NET MVC 4 web application. I will guide you through and create Responsive Web Design using Bootstrap.

Step 1 - Create ASP.NET MVC Web Application

  1. Open Visual Studio 2012 and create a new project of type ASP.NET MVC Web Application.
  2. On this project, I create a solution called MVCBootstrap.

    ASP.NET MVC 4 Bootstrap 3.3.2 in 2 Steps

       3. Press OK, and a new window will appear with several options of the template to use on our project.

       4. Select the project type empty.

    ASP.NET MVC 4 Bootstrap 3.3.2 in 2 Steps


    Step 2 – Install bootstrap package from NuGet Package

    1. Right click the solution and select Manage NuGet packages for the solution.
    2. In the Manage NuGet screen, select online Packages section.
    3. Type bootstrap in the search box then you find the latest bootstrap package.
    4. Now you click the install button.

    ASP.NET MVC 4 Bootstrap 3.3.2 in 2 Steps

     

    Now your project is ready to use with bootstrap.

    Now you can add view or layout page and link bootstrap CSS file in your view or layout page.

    Now you can use bootstrap class and template.


    HTML Code:
    <!DOCTYPEhtml>
     
    <html>
    <head>
        <metaname="viewport"content="width=device-width"/>
        <title>@ViewBag.Title</title>
        <linkhref="~/Content/bootstrap.min.css"rel="stylesheet"/>
        <linkhref="~/Content/bootstrap-theme.min.css"rel="stylesheet"/>
    </head>
    <body>
        <navclass="navbar navbar-default">
            <divclass="container-fluid">
                <divclass="navbar-header">
                    <buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1">
                        <spanclass="sr-only">Toggle navigation</span>
                        <spanclass="icon-bar"></span>
                        <spanclass="icon-bar"></span>
                        <spanclass="icon-bar"></span>
                    </button>
                    <aclass="navbar-brand"href="#">Brand</a>
                </div>
                <divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1">
                    <ulclass="nav navbar-nav">
                        <liclass="active"><ahref="#">Link <spanclass="sr-only">(current)</span></a></li>
                        <li><ahref="#">Link</a></li>
                        <liclass="dropdown">
                            <ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-expanded="false">Dropdown <spanclass="caret"></span></a>
                            <ulclass="dropdown-menu"role="menu">
                                <li><ahref="#">Action</a></li>
                                <li><ahref="#">Another action</a></li>
                                <li><ahref="#">Something else here</a></li>
                                <liclass="divider"></li>
                                <li><ahref="#">Separated link</a></li>
                                <liclass="divider"></li>
                                <li><ahref="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <formclass="navbar-form navbar-left"role="search">
                        <divclass="form-group">
                            <inputtype="text"class="form-control"placeholder="Search">
                        </div>
                        <buttontype="submit"class="btn btn-default">Submit</button>
                    </form>
                    <ulclass="nav navbar-nav navbar-right">
                        <li><ahref="#">Link</a></li>
                        <liclass="dropdown">
                            <ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-expanded="false">Dropdown <spanclass="caret"></span></a>
                            <ulclass="dropdown-menu"role="menu">
                                <li><ahref="#">Action</a></li>
                                <li><ahref="#">Another action</a></li>
                                <li><ahref="#">Something else here</a></li>
                                <liclass="divider"></li>
                                <li><ahref="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <divclass="container">
            <divclass="row">
                <divclass="col-md-4 well">&nbsp;</div>
                <divclass="col-md-4 well">&nbsp;</div>
                <divclass="col-md-4 well">&nbsp;</div>
            </div>
            <divclass="row">
                <divclass="col-md-7 well">&nbsp;</div>
                <divclass="col-md-3 well">&nbsp;</div>
            </div>
            <divclass="row">
                <divclass="col-md-2 well">&nbsp;</div>
                <divclass="col-md-8 well">&nbsp;</div>
                <divclass="col-md-2 well">&nbsp;</div>
            </div>
            <divclass="row">
                <divclass="col-md-3 well">&nbsp;</div>
                <divclass="col-md-4 well">&nbsp;</div>
                <divclass="col-md-5 well">&nbsp;</div>
            </div>
            @RenderBody()
        </div>
    </body>
    </html>

     

    In my next post, i'll explain about Bootstrap ScrollSpy, Miscellaneous and Breadcrumbs


    I am a content writter !

    Leave Comment

    Comments

    Liked By